<template>
	<view class="toClassify">
		<Navigation title="商城" background="#FABB3C" titleColor="#fff" />
		<view class="top-box ph-24 pv-14 f ai-c jc-s-b">
			<view class="f f1">
				<view class="search w-f">
					<u-search placeholder="快速查找戳我" v-model="queryParams.keyword" height="30" bgColor="#FFFFFF"
						searchIconColor="#999" placeholderColor="#999" clearabled :showAction="false">
					</u-search>
					<view class="w-100 search-btn"><u-button text="搜索" color="#FABB3C" shape="circle"
							@click.stop="handelSearch"></u-button></view>
				</view>
			</view>
			<view class="w-40 h-40 ml-24 cart" @click="toCart">
				<image src="http://cwht.ricecs.cn/app/shop/cart.png" class="w-40 h-40"></image>
				<view class="w-20 h-20 b-20" v-show="cartCount > 0"></view>
			</view>
		</view>

		<view class="f list">
			<!-- <scroll-view scroll-y="true" :style="{ height: height + 'px' }" class="box w-150">
                <view class="w-150">
                    <view
                        v-for="(item, index) in classify"
                        :key="index"
                        class="w-150 h-96 f ai-c jc-c fs-24 text-color4"
                        :class="typeCurt == index ? 'active' : ''"
                        @click="changeClassify(index)"
                    >
                        {{ item.name }}
                    </view>
                </view>
            </scroll-view> -->
			<view class="f f1 fd-c">
				<!-- <view class="h-80 w-f">
                    <u-tabs
                        :list="twoClassify"
                        lineColor="#FABB3C"
                        :activeStyle="{ fontSize: '28rpx', color: '#222222', fontWeight: '600' }"
                        :inactiveStyle="{ fontSize: '28rpx', color: '#999999' }"
                        @click="changeTwoClassify"
                        :current="twoCurt"
                    >
                    </u-tabs>
                </view> -->
				<scroll-view scroll-y="true" :style="{ height: height + 'px' }" @scrolltolower="scrolltolower"
					:refresher-enabled="isOpenRefresh" :refresher-triggered="triggered" @refresherpulling="onPulling"
					@refresherrefresh="onRefresh">
					<view class="f jc-s-b mt-20 ph-16">
						<view class="mr-16">
							<view v-for="(item, index) in listL" :key="index"
								class="w-343 b-24 ph-8 pt-8 pb-20 goods mb-16" @click="toDetail(item)">
								<image :src="item.picUrl.split(',')[0]" class="w-343 b-24" mode="widthFix"></image>
								<view class="ph-12">
									<view class="fs-28 fw-600 mt-16 text-color4 text-ellipsis-2">{{ item.name }}</view>
									<view class="mt-8 fs-30 fw-600 text-color7">¥{{ item.combinationPrice }} </view>
									<view class="fs-22 text-color3 old-price">¥{{item.originalPrice}}</view>
									<view class="f ai-c jc-s-b mt-16">
										<view class="f">
											<image src="../../static/logo.png" class="w-48 h-48 b-48 mr-8"></image>
											<image src="http://cwht.ricecs.cn/app/shop/query.png"
												class="w-48 h-48 b-48"></image>
										</view>
										<u-count-down :time="item.limitDuration" format="HH:mm:ss" autoStart millisecond
											@change="onChange">
											<view class="f ai-c time-data">
												<view>
													{{ timeData.hours > 10 ? timeData.hours : '0' + timeData.hours }}
												</view>
												<view>:</view>
												<view>
													{{ timeData.minutes }}
												</view>
												<view>:</view>
												<view>
													{{ timeData.seconds }}
												</view>
											</view>
										</u-count-down>
									</view>
									<view class="w-236 h-56 b-4 mt-20 f ai-c jc-c fs-26 text-color5 btn">参与拼团</view>
								</view>
							</view>
						</view>
						<view>
							<view v-for="(item, index) in listR" :key="index"
								class="w-343 b-24 ph-8 pt-8 pb-20 goods mb-16" @click="toDetail(item)">
								<image :src="item.picUrl.split(',')[0]" class="w-343 b-24" mode="widthFix"></image>
								<view class="ph-12">
									<view class="fs-28 fw-600 mt-16 text-color4 text-ellipsis-2">{{ item.name }}</view>
									<view class="mt-8 fs-30 fw-600 text-color7">¥{{ item.combinationPrice }}</view>
									<view class="fs-22 text-color3 old-price">¥{{item.originalPrice}}</view>
									<view class="f ai-c jc-s-b mt-16">
										<view class="f">
											<!-- <image src="../../static/logo.png" class="w-48 h-48 b-48 mr-8"></image> -->
											<image src="http://cwht.ricecs.cn/app/shop/query.png"
												class="w-48 h-48 b-48"></image>
										</view>
										<u-count-down :time="item.limitDuration" format="HH:mm:ss" autoStart
											millisecond @change="onChange">
											<view class="f ai-c time-data">
												<view>
													{{ timeData.hours > 10 ? timeData.hours : '0' + timeData.hours }}
												</view>
												<view>:</view>
												<view>
													{{ timeData.minutes }}
												</view>
												<view>:</view>
												<view>
													{{ timeData.seconds }}
												</view>
											</view>
										</u-count-down>
									</view>
									<view class="w-236 h-56 b-4 mt-20 f ai-c jc-c fs-26 text-color5 btn">参与拼团</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref, getCurrentInstance } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { categoryFirstList, categorySecondList, combinationActivityPage, categoryTopList } from '@/services/api/shop/index';
	import { cartGetCount } from '@/services/api/shop/cart';
	const { proxy } = getCurrentInstance();
	const classify = ref<any[]>([]);
	const typeCurt = ref(0);
	const twoClassify = ref<any[]>([]);
	const twoCurt = ref(0);

	const queryParams = ref({
		// type: 2,
		// sortAsc: true,
		pageNo: 1,
		pageSize: 10,
		// firstCategoryId: null,
		// secondCategoryId: null,
		keyword: '',
	});
	const listL = ref<any>([]);
	const listR = ref<any>([]);
	const cartCount = ref(0);
	const timeData = ref({

	});
	const isOpenRefresh = ref(true);
	const triggered = ref(false);
	onLoad(() => {
		listL.value = [];
		listR.value = [];
		queryParams.value.pageNo = 1;
		getSpuPage();
		// getCategoryFirstList();
		// getCartCount();
	});
	onShow(() => {
		getCartCount();
	});
	//下拉刷新
	function onPulling(e : any) {
		if (e.detail.deltaY < 0) return;
		triggered.value = true;
	}
	function onRefresh() {
		triggered.value = false;
		listL.value = [];
		listR.value = [];
		queryParams.value.pageNo = 1;
		getSpuPage();
	}
	const onChange = (e : any) => {
		timeData.value = e;
	};

	// 小时转毫秒
	function hoursTime(hours) {
		const millisecondsInAnHour = 60 * 60 * 1000; // 1小时等于60分钟*60秒*1000毫秒
		const milliseconds = hours * millisecondsInAnHour;
		return milliseconds;
	}

	function toCart() {
		uni.navigateTo({
			url: '/pages_shop/shopCart/index',
		});
	}
	//获取购物车数量
	async function getCartCount() {
		const { data } = await cartGetCount({});
		cartCount.value = data;
	}
	//搜索
	function handelSearch() {
		listL.value = [];
		listR.value = [];
		getSpuPage();
	}
	//上拉加载
	function scrolltolower() {
		queryParams.value.pageNo++;
		getSpuPage();
	}
	//获取商品
	async function getSpuPage() {
		const { data } = await combinationActivityPage(queryParams.value);
		if (data.list.length > 0) {
			data.list.forEach((item : any, index : number) => {
				item.limitDuration = hoursTime(item.limitDuration)
				if (index % 2 === 0) {
					listL.value.push(item);
				} else {
					listR.value.push(item);
				}
			});
		}
	}

	//获取一级分类
	async function getCategoryFirstList() {
		const topcategory = await categoryTopList({ type: 0, spuType: 5 });
		const topCategoryIds = topcategory.data.map((item : any) => {
			return item.id;
		});
		const { data } = await categoryFirstList({ type: 0, spuType: 5, topCategoryIds });
		classify.value = data;
		if (classify.value.length > 0) {
			typeCurt.value = 0;
			getCategorySecondList();
		}
	}

	//获取二级分类
	async function getCategorySecondList() {
		queryParams.value.firstCategoryId = classify.value[typeCurt.value].id;
		const { data } = await categorySecondList({ type: 0, parentId: queryParams.value.firstCategoryId });
		twoCurt.value = 0;
		twoClassify.value = data;
		queryParams.value.secondCategoryId = twoClassify.value[twoCurt.value].id;
		listL.value = [];
		listR.value = [];
		getSpuPage();
	}
	//切换二级分类
	function changeTwoClassify(data : any) {
		twoCurt.value = data.index;
		queryParams.value.secondCategoryId = twoClassify.value[twoCurt.value].id;
		listL.value = [];
		listR.value = [];
		getSpuPage();
	}
	//切换一级分类
	function changeClassify(index : number) {
		typeCurt.value = index;
		getCategorySecondList();
	}

	const toDetail = (data : any) => {
		uni.navigateTo({
			url: `/pages_shop/teamworkDetail/index?id=${data.spuId}`,
		});
	};
	uni.setNavigationBarColor({
		frontColor: '#ffffff',
		backgroundColor: '#ffffff',
	});
	let systemInfo = uni.getSystemInfoSync();
	const statusBarHeight = systemInfo.statusBarHeight;
	let pageHeight = systemInfo.windowHeight;
	const height = pageHeight - statusBarHeight - 46 - 43;
	console.log(height);
</script>

<style lang="scss" scoped>
	.toClassify {
		.btn {
			background: #fabb3c;
		}

		.time-data {
			font-weight: 400;
			font-size: 20rpx;
			color: #999999;
		}

		.goods {
			background: #f5f5f5;
		}

		.old-price {
			text-decoration: line-through;
		}

		.list {
			.box {
				background: #f5f5f5;
				height: 100%;
			}

			.list-content {
				height: 100%;
			}

			.list-box {
				height: 100%;

				.text {
					border: 2rpx solid #f0f0f0;
				}
			}

			.active {
				background: #fff;
				color: #fabb3c;
				position: relative;
			}

			.active::after {
				position: absolute;
				background: #fabb3c;
				height: 40rpx;
				width: 6rpx;
				top: 50%;
				margin-top: -20rpx;
				left: 0;
				content: '';
			}
		}

		.top-box {
			background: #fabb3c;
		}

		.cart {
			position: relative;

			view {
				background: #f54040;
				position: absolute;
				right: -10rpx;
				top: -10rpx;
			}
		}

		.search {
			position: relative;
			background: #fabb3c;

			.search-btn {
				position: absolute;
				right: 6rpx;
				top: 6rpx;
				z-index: 11;
			}

			::v-deep .u-button__text {
				font-size: 22rpx !important;
				font-weight: 400 !important;
			}

			::v-deep .u-button {
				height: 48rpx !important;
			}
		}
	}
</style>